<!--
 * @Author: jingjingzheng 1742420988@qq.com
 * @Date: 2023-12-21 03:29:07
 * @LastEditors: jingjingzheng 1742420988@qq.com
 * @LastEditTime: 2024-03-29 23:19:52
 * @FilePath: \mdbj-ui\src\views\datamanager\roadsurface\editPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="title-row">
        <span :style="{ color: theme }">| 修改 {{roadname}} 道路面信息</span>
      </el-col>
    </el-row>

    <el-form id="elForm" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="125px" v-if="formData">
      <el-row>
        <el-col :span="formcolwidth">
          <el-form-item label="道路编码" label-width="120px" prop="code">
            <el-input
              v-model="formData.code"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
      </el-col>
        <el-col :span="formcolwidth">
          <el-form-item label="道路功能" label-width="120px" prop="roadfunction">
            <el-select
              v-model="formData.roadfunction"
              placeholder="请选择道路功能"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_roadfunction"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="formcolwidth">
          <el-form-item label="路面材料" label-width="120px" prop="pavementmaterials">
            <el-select
              v-model="formData.pavementmaterials"
              placeholder="请选择路面材料"
              clearable
              :style="{ width: '100%' }"
              >
              <el-option
              v-for="dict in dict.type.sys_pavementmaterials"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="formcolwidth">
          <el-form-item label="参考面积(m²)" label-width="120px" prop="width">
            <el-input
              v-model="formData.ref_area"
              :disabled="false"
              clearable
              :style="{ width: '100%' }"
              @input="formData.ref_area= formData.ref_area.replace(/[^\d|\.]/g, '')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="formcolwidth">
          <el-form-item label="面积(m²)" label-width="120px" prop="width">
            <div v-if="formData.occupiedarea">
                <el-input
                v-model="formData.occupiedarea.toFixed(2)"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </div>
            <div v-if="!formData.occupiedarea">
              <el-input
              v-model="formData.occupiedarea"
              :disabled="true"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </div>
          </el-form-item>
        </el-col>
        <el-col :span="formcolwidth">
          <el-form-item label="道路状态" prop="data_status">
            <el-select v-model="formData.data_status" :disabled="true" placeholder="请选择道路状态" clearable
              :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.road_data_status" :key="dict.value" :label="dict.label"
                :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="formcolwidth">
            <el-form-item label="备注" label-width="120px" prop="note">
              <el-input
                v-model="formData.note"
                :disabled="false"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
        </el-col>
      </el-row>
      </el-row>
      <div class="footer">
        <el-button type="primary" @click="submitForm" icon="el-icon-check">提交</el-button>
        <el-button v-if="formData.data_status =='1'"@click="resetForm">重置</el-button>
        <el-button type="primary" plain icon="el-icon-circle-close" @click="cancel">返回</el-button>
      </div>
    </el-form>

  </div>
</template>

<script>
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Graphic from "@arcgis/core/Graphic";
import Sketch from "@arcgis/core/widgets/Sketch";
export default {
  name: 'MdbjUiEditPanel',
  props: {
    mapview: { default: () => { } },
    paramObj: { default: () => { } },
  },
  inject: ["toggleComponent"],
  components: {
    Graphic,
    GraphicsLayer,
    Sketch,
  },
  dicts: [
  "sys_roadclass_js",
  "sys_cleancompany",
  "sys_roadfunction",
  "sys_pavementmaterials",
  "road_data_status"
  ],
  computed: {
    theme() {
    return this.$store.state.settings.theme;
    },
  },
  data() {
    return {
      //新增道路面修改开关
      // isroadsurfaceEdit: true,
      // 修改表单参数
      formData: undefined,
      rules: {},
      rules: {
      roadfunction: [
      { required: true, message: '请选择道路功能', trigger: 'blur' },
      ],
      pavementmaterials: [
      { required: true, message: '请选择路面材料', trigger: 'blur' },
      ],
      occupiedarea: [
      { required: false, message: '请输入占用面积', trigger: 'blur' },
      ],
      cleancompany: [
      { required: true, message: '请选择保洁公司', trigger: 'blur' },
      ],
      },
      // 当前页道路中心线
      feature: undefined,
      // 当前页正在编辑的要素-道路面
      roadsurfacefeature: undefined,
      // 列表宽度
      formcolwidth: 12,
      // 图层视图
      layerView: undefined,
      // 道路面图层视图
      roadsurfacelayerView: undefined,
      // 道路面要素图层
      roadsurfacefeatureLayer: undefined,
      // 道路面要素集合
      roadsurfacefeatures: [],
      // 修改道路面的空间信息
      udpateGraphicsLayer: undefined,
      selectedGraphic: undefined,
      addGraphics: [],
    }
  },
  activated() {
    let _self = this
    console.log(_self.paramObj);
    _self.initData();
    //重新加载道路面数据
    _self.initFeatureLayer();
  },
  deactivated() {
    let _self = this
    _self.clearGraphics();
    _self.clearData();
  },
  methods: {
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initData(){
      let _self = this
      _self.feature = _self.paramObj.feature;
      _self.roadname = this.paramObj.feature.attributes.name;
      _self.roadsurfacefeature = _self.paramObj.roadsurfacefeature;
      _self.formData = _self.roadsurfacefeature.attributes;
      _self.roadsurfacefeatureLayer = _self.paramObj.roadsurfacefeatureLayer;
      console.log(_self.formData.data_status);
    },
    /**
     * @description: 初始化roadsurfacefeatureLayer
     * @return {*}
     */
    initFeatureLayer() {
      let _self = this;
      _self.mapview.map.add(_self.roadsurfacefeatureLayer,1);
      // 获取当前图层视图
      _self.mapview.whenLayerView(_self.roadsurfacefeatureLayer).then((layerView) => {
        _self.roadsurfacelayerView = layerView;
        _self.updateGeometry();
      });
    },
    clearGraphics(){
      let _self = this
      _self.addGraphics = [];
        // 删除临时图形
        _self.mapview.map.layers.remove(_self.udpateGraphicsLayer);
        // 删除微件
        _self.mapview.ui.remove(_self.sketch);
        // 移除道路面图形
        _self.mapview.map.remove(_self.roadsurfacefeatureLayer);
    },
    cancel() {
      let _self = this
      _self.clearGraphics();
      const paramObj = {
        feature:_self.feature,
        activeName:"roadsurfacePanel"
        };
      _self.clearData();
      this.toggleComponent("editPanel",paramObj);
      },
      submitForm() {
        let _self = this;
        _self.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          if (_self.selectedGraphic == undefined) {
            _self.$message.error("请添加空间位置信息");
            return;
            }
          // 新增要素
          const editFeature = new Graphic({
            geometry:
              _self.selectedGraphic == undefined
                ? ""
                : _self.selectedGraphic.geometry,
            attributes: _self.formData,
          });
          const edits = {
            updateFeatures: [editFeature],
          };
          // 更新要素
          _self.roadsurfacefeatureLayer.applyEdits(edits).then((editsResult) => {
            _self.$message.success("修改成功");
            // 退出
            _self.cancel();
          });
        })
      },
      // 更新空间位置
      updateGeometry() {
        let _self = this;
        _self.udpateGraphicsLayer = new GraphicsLayer({
          title: "道路面编辑图层",
        });
        _self.mapview.map.add(_self.udpateGraphicsLayer);
        _self.sketch = new Sketch({
          layer: _self.udpateGraphicsLayer,
          view: _self.mapview,
          // graphic will be selected as soon as it is created
          creationMode: "update",
        });
        // 设置绘图工具条显示要素
        _self.sketch.visibleElements = {
          createTools: {
            point: false,
            polyline: false,
            polygon: true,
            rectangle: false,
            circle: false,
          },
          selectionTools: {
            "lasso-selection": false,
            "rectangle-selection": false,
          },
          settingsMenu: false,
        };
        // 指定要更新的图形
        _self.selectedGraphic = new Graphic({
          geometry: _self.roadsurfacefeature.geometry,
          // 指定线要素符号
          symbol: window.mapConfig.symbols.polylineLocate,
        });
        _self.udpateGraphicsLayer.add(_self.selectedGraphic);
        _self.sketch.update(_self.selectedGraphic);
        _self.mapview.ui.add(_self.sketch, "top-right");
        _self.sketch.when(() => {
          // 初始时先隐藏创建图形按钮
          // 每个要素只有一个面，如果已创建的一个面，则不允许继续创建面。隐藏创建面按钮
          document.getElementsByClassName(
            "esri-sketch__section esri-sketch__tool-section"
          )[1].style.display = "none";
        });

        _self.sketch.on("create", (event) => {
          if (event.state === "complete") {
            console.log("create complete");
            _self.selectedGraphic = event.graphic;
            _self.addGraphics.push(event.graphic);
            // 每个要素只有一个面，如果已创建的一个面，则不允许继续创建面。隐藏创建面按钮
            if (_self.addGraphics.length > 0)
              document.getElementsByClassName(
                "esri-sketch__section esri-sketch__tool-section"
              )[1].style.display = "none";
          }
        });

        _self.sketch.on("update", (event) => {
          if (event.state === "complete") {
            console.log("Sketch complete");
            _self.mapview.graphics.add(event.graphics);
            // _self.mapview.ui.remove(_self.sketch);
          }
        });
        _self.sketch.on("delete", (event) => {
          event.graphics.forEach((graphic) => {
          console.log("deleted", graphic);
          if (graphic == _self.selectedGraphic)
            _self.selectedGraphic = undefined;
            _self.addGraphics = _self.addGraphics.filter(
            (item) => item !== graphic
          );
        });

        // 如果没有添加任何面，就显示创建面按钮
        if (_self.addGraphics.length == 0)
          document.getElementsByClassName(
            "esri-sketch__section esri-sketch__tool-section"
          )[1].style.display = "";
        });
      },
      resetForm() {
      let _self = this;
      _self.formData.roadfunction = undefined;
      _self.formData.pavementmaterials = undefined;
      _self.formData.ref_area = undefined;
      _self.formData.note = undefined;
      // 删除临时图形
      if (_self.selectedGraphic)
      _self.udpateGraphicsLayer.remove(_self.selectedGraphic);
      // 删除微件
      _self.mapview.ui.remove(_self.sketch);
      this.updateGeometry();
    },
    clearData(){
      let _self = this;
      // 重置输入表单
      _self.$refs["elForm"].resetFields();
      // _self.feature = undefined;
      // _self.featureLayer = undefined;
    },

  },
};
</script>

<style lang="less" scoped>

</style>
